<template>
    <div class="big poa">
        <div class="top">
            <div class="top_left">
                <span>
                    <icon_back @click="back" />
                </span>
            </div>
            <div class="top_right">
                <inputdiv v-model:value="value" :text="input_text" />
            </div>
        </div>
        <div class="tab">
            <div @click="switch_search(0, '输入关键字进行搜索 ( 视频描述 ) ')">视频</div>
            <div @click="switch_search(1, '输入关键字进行搜索 ( 昵称、id ) ')">用户</div>
            <div ref="hr" class="hr"></div>
        </div>
        <div class="btm">
            <component @follow="follow" @video_big="big_video_flag_open" :data="computedprops" :is="map[map_index]">
            </component>
        </div>
    </div>
    <Transition name="video">
        <div class="poa" v-show="big_video_flag">
            <div @click="big_video_flag = false" class="video_big_back">
                <icon_back />
            </div>
            <big_video :video_item_comments_flag="true" :index="big_video_index" :list="video_data.list" />
        </div>
    </Transition>
</template>
<script setup>
import { defineAsyncComponent, ref, watch, markRaw, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { search_video, search_user } from '../../api/api'
const hr = ref()
const router = useRouter()
const icon_back = defineAsyncComponent(() => import('../common/icon_back.vue'))
const inputdiv = defineAsyncComponent(() => import('../common/search_input.vue'))
const video_ = defineAsyncComponent(() => import('../search_user/search_video.vue'))
const user_ = defineAsyncComponent(() => import('../search_user/search_user.vue'))
const big_video = defineAsyncComponent(() => import('../common/video_list.vue'))
let map = reactive([markRaw(video_), markRaw(user_)])
let map_index = ref(0)
let input_text = ref('输入关键字进行搜索 ( 视频描述 ) ')
let value = ref('')
let big_video_flag = ref(false)
let big_video_index = ref(0)
let video_data = reactive(
    {
        list: [],
    }
)
let user_data = reactive(
    {
        list: [],
    }
)
watch(value, (newv, oldv) => {
    if (newv.trim() == '') return
    if (map_index.value == 0) {
        search_video(`api/user/${JSON.parse(localStorage.getItem('user')).userId}/searchVideo/1`, {
            key: value.value
        }).then().then(res => {
            if (res.data.code == 200) {
                video_data.list = res.data.data
            }
        })
    } else {
        search_user(`api/user/${JSON.parse(localStorage.getItem('user')).userId}/searchUser/1`, {
            key: value.value
        }).then(res => {
            if (res.data.code == 200) {
                user_data.list = res.data.data
            }
        })
    }
})
function follow(obj) {
    user_data.list[obj.index].myRelation = obj.text
}
function back() {
    router.go(-1)
}
function big_video_flag_open(index) {
    big_video_index.value = index
    big_video_flag.value = true
}
function switch_search(index, text) {
    hr.value.style = `left:${50 * index}%;`
    map_index.value = index
    input_text.value = text
    value.value = ''
    video_data.list = []
    user_data.list = []
}
let computedprops = computed(() => {
    switch (map_index.value) {
        case 0:
            return video_data;
        default:
            return user_data;
    }
})
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.video-enter-active {
    animation: shadow 0.5s ease;
}

.video-leave-active {
    animation: shadow 0.5s ease reverse;
}

@keyframes shadow {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}

.video_big_back {
    position: absolute;
    left: r(15);
    top: r(15);
    width: r(15);
    height: r(15);
    z-index: 16;
}


.btm {
    flex: 1;
    width: 100%;
    overflow-y: auto;
}

.tab {
    width: 100%;
    height: r(40);
    display: flex;
    position: relative;

    div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: r(14);
    }

    .hr {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: r(2);
        background-color: #face15;
        transition: all 1s;
    }
}

.big {
    display: flex;
    flex-direction: column;
    background-color: #161622;
}

.top {
    width: 100%;
    height: r(44);
    display: flex;

    .top_left {
        width: r(44);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
            width: r(16);
            height: r(16);
        }
    }

    .top_right {
        flex: 1;
        height: 100%;
        display: flex;
        padding: r(5) 0;
        padding-right: r(10);
    }
}
</style>